<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>添加用户</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css">
		<link href="css/reg_style.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<style>
			
			.mui-input-row .mui-btn {
				width: 80%;
				text-align: left;
				border: 0px solid #ccc;
				color: #808080;
			}
			
			.mui-input-group .mui-input-row .sex {
				display: inline-block;
				width: 20%;
			}
			
			.mui-checkbox.mui-left input[type=checkbox],
			.mui-radio.mui-left input[type=radio] {
				left: 0.06rem;
			}
			
			.mui-checkbox.mui-left label,
			.mui-radio.mui-left label {
				padding-left: 0.35rem;
				color: #808080!important;
			}

			#login-form{
				margin-top: 1rem;
			}
			.mui-input-row.char2 label{
				color: #4D4D4D;
			}
			.mui-checkbox input[type=checkbox]:before, .mui-radio input[type=radio]:before{
				font-size: 18px;
				line-height: 1.7;
				margin-left: 10px;
			}
			input::-webkit-input-placeholder{
			    color: #ccc;
			}
			input::-moz-placeholder{  
			    color: #ccc;        
			}
			input::-ms-input-placeholder{  
			    color: #ccc;        
			}
			input{
				color: #808080;
			}
		</style>
		<style type="text/css">
			header em{
				color: #4198FF;
			}
			.head1 em{
				float: left;
				width: 0.27rem;
				height: 0.36rem;
			}
			.head1 .img1 {
				float: left;
				width: 0.15rem;
				height: 0.15rem;
				margin-top: 0.1rem;
				margin-left: 0.07rem;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav head1">
			<em class="mui-action-back"><img class="img1" src="img/fanhui.png" alt="" /></em>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded content-box">
				<form id='login-form' class="mui-input-group">
					<div class="mui-input-row char2" style="display: none;">
						<label>账号</label>
						<input maxlength="11" id='account' pattern="\d*" type="number" class="mui-input-clear mui-input">
					</div>
					<div class="mui-input-row char2" style="display: none;">
						<label>密码</label>
						<input maxlength="16" id='password' type="text" class="mui-input-clear mui-input">
					</div>
					<div class="mui-input-row char2">
						<label>姓名</label>
						<input oninput="judge_add()" maxlength="4" id='real_name' type="text" class="mui-input" placeholder="请输入姓名" style="text-align: right;">
					</div>
					<div class="mui-input-row clearfix char2" style="text-align:left;">
						<label>性别</label>
						<div class="mui-input-row mui-radio mui-left sex" style="margin-left: 35%;">
							<label>男</label>
							<input name="gender" value="1" id='gender-1' type="radio" class="rds-gender">

						</div>
						<div class="mui-input-row mui-radio mui-left sex">
							<label>女</label>
							<input name="gender" value='0' id='gender-2' type="radio" class="rds-gender" checked>
						</div>
					</div>
					<div class="mui-input-row char2">
						<label>生日</label>    
						<span id="birth_date" data-options='{"type":"date","beginYear":1949,"endYear":3016}' class="btn mui-btn mui-btn-block"  style="text-align: right;">1974年05月05日</span>
					</div>
				</form>
				<div class="link-area forgetPassword red">
					<a id='forgetPassword'>&nbsp;</a>
				</div>
				<button id='btn_login' class="mui-btn mui-btn-block mui-btn-primary" onclick="user_join_add();" disabled="disabled" style="width: 110%;margin-left: -5%;">下一步</button>

			</div>
			<div class="mui-content-padded oauth-area">

			</div>

		</div>

		<script src="js/mui.min.js"></script>
		<script src="js/mui.enterfocus.js"></script>
		<script src="js/app.js"></script>
		<script src="js/jquery.js"></script>
		<script type="text/javascript" src="js/mui.picker.min.js"></script>
		<script type="text/javascript" src="js/jsencrypt.js"></script>
		<script src="js/md5.js"></script>
		<script src="js/crypto-js.js"></script>
		<script type="text/javascript" src="js/common.js"></script>		

		<script>
			mui.ready(function() {
				//读取登录信息
				var register_phone = storage["register_phone"];
				var register_psw = storage["register_psw"];
				
				if(register_phone != null) {
					mui("#account")[0].value = register_phone;
				}
				if(register_psw != null) {
					mui("#password")[0].value = register_psw;
				}				
			});
			
			//判断各个参数是否完全
			function judge_add() {
				var real_name = mui('#real_name')[0].value;
				if(real_name!="") {
					document.getElementById("btn_login").disabled = false;
					btn_login_se('jianbian3_shengse',"#btn_login");
				} else {
					document.getElementById("btn_login").disabled = true;
					btn_login_se('jianbian1_qianse',"#btn_login");
				}

			}



			(function($) {
				$.init();
				var result = $('#birth_date')[0];
				var btns = $('#birth_date');
				btns.each(function(i, btn) {
					btn.addEventListener('tap', function() {
						var _self = this;
						if(_self.picker) {
							_self.picker.show(function(rs) {
								result.innerText = rs.text;
								_self.picker.dispose();
								_self.picker = null;
							});
						} else {
							var optionsJson = this.getAttribute('data-options') || '{}';
							var options = JSON.parse(optionsJson);
							var id = this.getAttribute('id');
							/*
							 * 首次显示时实例化组件
							 * 示例为了简洁，将 options 放在了按钮的 dom 上
							 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
							 */
							_self.picker = new $.DtPicker(options);
							_self.picker.show(function(rs) {
								/*
								 * rs.value 拼合后的 value
								 * rs.text 拼合后的 text
								 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
								 * rs.m 月，用法同年
								 * rs.d 日，用法同年
								 * rs.h 时，用法同年
								 * rs.i 分（minutes 的第二个字母），用法同年
								 */
								
								rs.text=rs.y.text+"年"+rs.m.text+"月"+rs.d.text+"日";
								result.innerText = rs.text;
								/* 
								 * 返回 false 可以阻止选择框的关闭
								 * return false;
								 */
								/*
								 * 释放组件资源，释放后将将不能再操作组件
								 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
								 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
								 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
								 */
								_self.picker.dispose();
								_self.picker = null;
							});
						}

					}, false);
				});
			})(mui);
			
			
			
			function user_join_add() {
				var sex=mui("input[name='gender']:checked")[0].value;

				
				//存储到loaclStage   
				storage["register_real_name"] = mui('#real_name')[0].value;
				
				var sbx = {};
				sbx.id = mui("#account")[0].value;
				sbx.password = mui("#password")[0].value ;
				sbx.real_name = mui("#real_name")[0].value;
				sbx.gender = parseInt(sex);
				sbx.birth_date = mui("#birth_date")[0].innerText;
				sbx.auth_token = storage["auth_token"] ;	
				
				sbx.password = md5(sbx.password);
				sbx.password = sbx.password.toLowerCase();
				

//				
//				obj.client = var_client;
//				obj.version = var_version;
//				var encrypt = new JSEncrypt();
//				encrypt.setPublicKey(publicKey);
//				obj.params = encrypt.encryptLong(JSON.stringify(sbx));


				login_encrypt_md5(sbx);
				console.log(sbx);
				ajax_submit_before(url_host + 'user/join/add', 'user_join_add');

			}			
		</script>
	</body>

</html>